<script setup lang="ts">
import { onMounted, nextTick, ref, reactive, watch } from 'vue'
const Adata = reactive<{ title: string, age: number, sex: "男" | "女" }>({
  title: "555",
  age: 54,
  sex: "男"
})
const inputValue = ref<string>("qq")
</script>

<template>
  <div class="contain1">
    <div id="item">
      <p>222</p>
    </div>
    <p>A</p>
    <slot name="slotA" :data="Adata"></slot>
    <slot name="slotB" :data="Adata"></slot>
    <slot name="slotC" :data="Adata"></slot>
    <el-input v-model="inputValue" placeholder="" size="normal" clearable @change=""></el-input>
  </div>
</template>

<style lang='less' scoped>
// 即使scoped加了唯一标识，css写法也是直接写
.contain1 {
  // background-color: aqua;
  border: 10px solid rgb(24, 24, 24);
  // :slotted(#item){
  //   color: aquamarine;
    
  // }
  // #item {
  //   p{
  //     color: aquamarine;

  //   }
  // }
  .el-input {
    background-color: aqua;

    // input{
    //   background-color: rgb(145, 198, 22);
    // }
    :deep(input) {
      background-color: rgb(145, 198, 22);
    }
  }

  // slotted可以更改父组件插过来的组件
  
  :slotted(.el-input) {
    border: 5px solid rgb(47, 173, 30);
    input {
      background-color: aqua;
    }
    // :deep(input) {
    //   background-color: rgb(145, 198, 22);
    // }
  }
}

</style>